<template>
  <el-form :model="formData" :rules="formRules" label-width="120px" ref="baseForm" class="myForm">
<!--    大标题-->
    <slot name="baseTitle"/>

<!--    表单列-->
    <el-row :gutter="24">
      <el-col v-for="(item, index) in formColumns" :key="index" :span="8">
        <el-form-item :label="item.label" :prop="item.prop">
          <el-input v-model="formData[item.prop]"/>
        </el-form-item>
      </el-col>
    </el-row>
<!--    操作按钮-->
    <slot name="Actions" @submit="onSubmit" @reset="handlerReset" />
<!--    隐藏表单按钮，用于表单验证-->
    <el-button type="primary" style="display: none" @click="onSubmit"></el-button>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from "vue";

defineProps<{
  formData: Record<string, any>;
  formColumns: Array<{ label: string; prop: string }>;
  formRules: Record<string, any>;
}>();

const emits = defineEmits(["submit", "reset"])

const baseForm = ref()

const onSubmit = () => {
  if (baseForm.value) {
    baseForm.value.validate((valid: boolean) => {
      if (valid) {
        console.log("表单提交通过")
        emits("submit")
      } else {
        console.log("表单校验失败")
      }
    })
  } else {
    console.error("表单实例未初始化")
  }
}

const handlerReset = () => {
  if (baseForm.value) {
    baseForm.value.resetFields()
  } else {
    console.error("表单实例未初始化")
  }
}

</script>
<style scoped>

</style>